<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
    <style>
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <!--侧边栏目-->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246);min-height: 100vh">
            <div style="height: 60px;line-height: 60px;background-color: #82848a">
                项目
            </div>
            <el-menu :default-active="$route.path" router>
                <el-menu-item index="1" @click="click('view-article')">
                    <template slot="title">
                        <i class="el-icon-house"></i>
                        <span>文章列表</span>
                    </template>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-message"></i>知识库</template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1" @click="click('view-base')">我管理的知识库</el-menu-item>
                        <el-menu-item index="2-2" @click="click('view-enterBase')">我加入的知识库</el-menu-item>
                        <el-menu-item index="2-3" @click="click('view-baseSearch')">知识库搜素</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="3" @click="click('view-user')">信息管理</el-menu-item>
                <el-menu-item index="4" @click="click('view-userSearch')">用户搜索</el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <!--头部-->
            <el-header>
                <el-row>
                    <el-button type="primary" @click="selectTraces">查看浏览记录</el-button>
                    <el-dialog title="浏览记录" :visible.sync="tracesLog">
                        <div v-for="(trace,index) in traces" :key="index">
                            <el-descriptions>
                                <el-descriptions-item label="标题">{{ articles[index].title }}</el-descriptions-item>
                            </el-descriptions>
                            <el-row>
                                <el-button type="danger" @click="deleteTrace(trace.id)">删除</el-button>
                                <el-button type="primary" @click="locate(articles[index])">查看</el-button>
                            </el-row>
                        </div>
                        <el-row>
                            <el-button type="danger" @click="deleteAll">清空</el-button>
                        </el-row>
                    </el-dialog>
                </el-row>
            </el-header>
            <!--主题区域-->
            <el-main style="min-height: 100vh">
                <component :is="currentView"></component>
            </el-main>
        </el-container>
    </el-container>
</div>

<script src="js/axios-0.18.0.js"></script>
<script>
    const first = {
        data: function () {
            return {
                title: "首页"
            }
        },
        template: `
          <el-main>
            <div>
              这里也有一段文字
            </div>
          </el-main>`
    }
    <!--文章内容组件-->
    const article = {
        data: function () {
            return {
                input: '',
                articles: [],
                articleLength: '',
                page: 1,
                size: 6,
                value: 'like',
                options: [{
                    value: 'like',
                    label: '按点赞数排序'
                }, {
                    value: 'time',
                    label: '按时间排序'
                }],
                user: {
                    id: ''
                },
                collectUserArticles: [],
                collectLog: false
            }
        },
        created() {
            let search = location.search;
            let urlParams = new URLSearchParams(search);
            this.user.id = JSON.parse(urlParams.get('userId'))
            this.showPageByLike();
        },
        methods: {
            search() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/article/searchArticle?input=" + _this.input,
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    }
                }).then(function (resp) {
                    _this.articles = resp.data.data[0];
                });
            },
            lookArticle(article) {
                var _this = this;
                let thisArticle = {
                    id: '',
                    title: '',
                    content: '',
                    createrId: '',
                    creatTime: '',
                    baseId: ''
                };
                thisArticle = article;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/traces/insertTraces",
                    data: {
                        userId: _this.user.id,
                        articleId: article.id
                    }
                }).then(function (resp) {
                    console.log(resp.data.msg);
                    location.href = "article.html?article=" + JSON.stringify(thisArticle) + "&id=" + JSON.stringify(_this.user.id);
                });
            },
            changeStyle() {
                if (this.value === 'like') {
                    this.showPageByLike();
                } else {
                    this.showArticleByTime()
                }
            },
            changePage(val) {
                this.page = val;
                if (this.value === 'like') {
                    this.showPageByLike();
                } else {
                    this.showArticleByTime()
                }
            },
            changeSize(val) {
                this.size = val;
                if (this.value === 'like') {
                    this.showPageByLike();
                } else {
                    this.showArticleByTime();
                }

            },
            showPageByLike() {
                var _this = this;
                axios({
                    method: 'get',
                    url: "http://localhost:8080/webdemo/method/article/showArticleByLike?page=" + _this.page + "&size=" + _this.size
                }).then(function (resp) {
                    var Page = resp.data.data[0];
                    _this.articles = Page.data;
                    _this.articleLength = Page.totalSize;
                });
            },
            showArticleByTime() {
                var _this = this;
                axios({
                    method: 'get',
                    url: "http://localhost:8080/webdemo/method/article/showArticleByTime?page=" + _this.page + "&size=" + _this.size
                }).then(function (resp) {
                    var Page = resp.data.data[0];
                    _this.articles = Page.data;
                    _this.articleLength = Page.totalSize;
                });
            },
            collectUserArticle() {
                this.collectLog = true;
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/collect/collectUserArticle?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.collectUserArticles = resp.data.data[0];
                });
            }
        },
        template: `
          <div>
            <el-select v-model="value" @change="changeStyle" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <el-row>
              <el-button type="primary" @click="search">搜索文章</el-button>
              <el-button type="primary" @click="collectUserArticle">仅关注的作者文章</el-button>
              <el-dialog title="关注的用户" :visible.sync="collectLog">
                <div v-for="article in collectUserArticles">
                  <el-descriptions>
                    <el-descriptions-item label="标题">{{ article.title }}</el-descriptions-item>
                  </el-descriptions>
                  <el-row>
                    <el-button type="primary" @click="lookArticle(article)">查看</el-button>
                  </el-row>
                </div>
              </el-dialog>
            </el-row>
            <div v-for="article in articles">
              <div style="font-size: 24px;">
                <el-row>
                  {{ article.title }}
                  <el-button type="primary" @click="lookArticle(article)">查看</el-button>
                  <hr>
                </el-row>
                <br>
              </div>
            </div>
            <el-pagination
                @current-change="changePage"
                @size-change="changeSize"
                :page-size="size"
                :pager-count="11"
                :page-sizes="[6, 12, 18, 21]"
                layout="sizes,prev, pager, next"
                :total='articleLength'>
            </el-pagination>
          </div>
        `
    }
    const person = {
        data: function () {
            return {
                headImageForm: {
                    headImage: ''
                },
                user: {
                    id: '',
                    username: '',
                    email: '',
                    phone: '',
                    headImage: '',
                    password: ''
                },
                userForm: false,
                headImage: false,
                formLabelWidth: '120px',
                form: {
                    email: '',
                    phone: ''
                },
                collectBases: [],
                collectBaseLog: false,
                baseArticleLog: false,
                collectArticles: [],
                collectArticleLog: false,
                users: [],
                collectUsers: [],
                collectUserLog: false,
                inviteCount: 0,
                inviteBases: [],
                inviteBaseLog: false,
                likeCount: 0,
                likeLog: false,
                commentCount: 0,
                comments: [],
                commentLog: false,
                messages: [],
                replyCount: 0,
                replyLog: false,
                dialogCount: 0,
                userDialogCount: [],
                dialogLog: false,
                dialogs: [],
                dialogUsers: [],
                <!---->
                usernames: [],
                articles: [],
                userIds: [],
                messageIds: [],
                <!---->
            }
        },
        mounted() {
            let search = location.search;
            let urlParams = new URLSearchParams(search);
            this.user.id = JSON.parse(urlParams.get('userId'));
            this.getUser();
        },
        methods: {
            getUser() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/user/getUser?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.user = resp.data.data[0];
                    _this.getInviteCount();
                    _this.getLikeCount();
                    _this.getCommentCount();
                    _this.getReplyCount();
                    _this.getDialogCount();
                });
            },
            errorHandler() {
                return true;
            },
            updateUser() {
                this.userForm = false;
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/user/updateUser",
                    data: {
                        email: _this.form.email,
                        phone: _this.form.phone,
                        userId: _this.user.id
                    }
                }).then(function (resp) {
                    if (resp.data.msg === "success") {
                        alert("修改成功");
                    } else if (resp.data.msg === "phone") {
                        alert("修改失败,请检查手机号");
                    } else if (resp.data.msg === "email") {
                        alert("修改失败，请检查邮箱");
                    }
                });
            },
            handleFileChange(event) {
                this.file = event.target.files[0];
            },
            handleSubmit() {
                this.headImage = false;
                var _this = this;
                const formData = new FormData();
                formData.append('userId', this.user.id);
                formData.append('file', this.file);
                axios.post('/webdemo/method/myFiles/headImage', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(response => {
                    console.log(response.data.msg);
                }).catch(error => {
                    console.error(error);
                });
            },
            showCollectBase() {
                this.collectBaseLog = true;
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/collect/getCollectBases?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.collectBases = resp.data.data[0];
                });
            },
            lookArticle(baseId) {
                this.baseArticleLog = true;
                this.collectBaseLog = false;
                var _this = this;
                axios({
                    methods: "get",
                    url: "http://localhost:8080/webdemo/method/article/baseArticle?baseId=" + baseId
                }).then(function (resp) {
                    _this.articles = [];
                    _this.usernames = [];
                    var articleView = resp.data.data[0];
                    for (let i = 0; i < articleView.length; i++) {
                        _this.articles.push(articleView[i].article);
                        _this.usernames.push(articleView[i].author);
                    }
                    console.log(resp.data.msg);
                });
            },
            getTime(min) {
                let newDate = new Date();
                newDate.setTime(min);
                return newDate.toDateString();
            },
            clickArticle(article) {
                location.href = "article.html?article=" + JSON.stringify(article) + "&id=" + JSON.stringify(this.user.id);
            },
            cancelBase(id) {
                var _this = this;
                axios({
                    method: "post",
                    url: 'http://localhost:8080/webdemo/method/collect/cancelCollectBase',
                    data: {
                        baseId: id,
                        userId: _this.user.id
                    }
                }).then(function (resp) {
                    if (resp.data.msg) {
                        alert("取消成功");
                    }
                });
            },
            showCollectArticle() {
                this.collectArticleLog = true;
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/collect/getCollectArticles?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.collectArticles = [];
                    _this.collectArticles = resp.data.data[0];
                });
            },
            locateArticle(collectArticle) {
                location.href = "article.html?article=" + JSON.stringify(collectArticle) + "&id=" + JSON.stringify(this.user.id);
            },
            cancelArticle(articleId) {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/collect/cancelCollectArticle",
                    data: {
                        articleId: articleId,
                        userId: _this.user.id
                    }
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert("取消收藏成功");
                    }
                });
            },
            showCollectUser() {
                this.collectUserLog = true;
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/collect/getCollectUsers?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.collectUsers = resp.data.data[0];
                });
            },
            cancelUser(collectId) {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/collect/cancelCollectUser",
                    data: {
                        collectId: collectId,
                        userId: _this.user.id
                    }
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert("取消成功");
                    }
                });
            },
            getInviteCount() {
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/invite/getInviteCount?username=' + _this.user.username
                }).then(function (resp) {
                    _this.inviteCount = resp.data.data[0];
                });
            },
            showInvite() {
                this.inviteBaseLog = true;
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/invite/showInvite?userId=' + _this.user.id
                }).then(function (resp) {
                    _this.inviteBases = resp.data.data[0];
                });
            },
            acceptInvite(baseId) {
                var _this = this;
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/webdemo/method/invite/acceptInvite',
                    data: {
                        baseId: baseId,
                        userId: _this.user.id
                    }
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert('同意成功');
                        _this.getInviteCount();
                    } else {
                        alert("失败");
                    }
                });
            },
            rejectInvite(baseId) {
                var _this = this;
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/webdemo/method/invite/rejectInvite',
                    data: {
                        username: _this.user.username,
                        baseId: baseId
                    }
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert('成功');
                        _this.getInviteCount();
                    } else {
                        alert('失败');
                    }
                });
            },
            getLikeCount() {
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/message/getLikeCount?userId=' + _this.user.id
                }).then(function (resp) {
                    _this.likeCount = resp.data.data[0];
                });
            },
            showLike() {
                this.likeLog = true;
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/message/getLikeMessage?userId=' + _this.user.id
                }).then(function (resp) {
                    _this.usernames = [];
                    _this.articles = [];
                    _this.messageIds = [];
                    _this.userIds = [];
                    var likeView = resp.data.data[0];
                    for (let i = 0; i < likeView.length; i++) {
                        _this.usernames.push(likeView[i].username);
                        _this.articles.push(likeView[i].article);
                        _this.messageIds.push(likeView[i].messageId);
                        _this.userIds.push(likeView[i].userId);
                    }
                    _this.getLikeCount();
                });
            },
            lookUser(userId) {
                location.href = "user.html?id=" + JSON.stringify(userId) + '&userId=' + JSON.stringify(this.user.id);
            },
            deleteLike(messageId) {
                var _this = this;
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/webdemo/method/message/deleteLikeMessage',
                    data: messageId
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert("删除成功");
                    }
                });
            },
            getCommentCount() {
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/message/getCommentCount?userId=' + _this.user.id
                }).then(function (resp) {
                    _this.commentCount = resp.data.data[0];
                });
            },
            showComment() {
                this.commentLog = true
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/message/getCommentMessage?userId=' + _this.user.id
                }).then(function (resp) {
                    _this.usernames = [];
                    _this.userIds = [];
                    _this.articles = [];
                    _this.messageIds = [];
                    var commentMessageView = resp.data.data[0];
                    for (let i = 0; i < commentMessageView.length; i++) {
                        _this.usernames.push(commentMessageView[i].username);
                        _this.articles.push(commentMessageView[i].article);
                        _this.messageIds.push(commentMessageView[i].messageId);
                        _this.userIds.push(commentMessageView[i].userId);
                    }
                    _this.getCommentCount();
                });
            },
            deleteComment(messageId) {
                var _this = this;
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/webdemo/method/message/deleteCommentMessage',
                    data: messageId
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert('删除成功');
                    } else {
                        alert('删除失败');
                    }
                });
            },
            getReplyCount() {
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/message/getReplyCount?userId=' + _this.user.id
                }).then(function (resp) {
                    _this.replyCount = resp.data.data[0];
                });
            },
            showReply() {
                this.replyLog = true;
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/message/getReplyMessage?userId=' + _this.user.id
                }).then(function (resp) {
                    _this.usernames = [];
                    _this.articles = [];
                    _this.messageIds = [];
                    _this.userIds = [];
                    var replyView = resp.data.data[0];
                    for (let i = 0; i < replyView.length; i++) {
                        _this.usernames.push(replyView[i].username);
                        _this.articles.push(replyView[i].article);
                        _this.messageIds.push(replyView[i].messageId);
                        _this.userIds.push(replyView[i].userId);
                    }
                    _this.getReplyCount();
                });
            },
            deleteReply(messageId) {
                var _this = this;
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/webdemo/method/message/deleteReplyMessage',
                    data: messageId
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert("删除成功");
                    } else {
                        alert("删除失败");
                    }
                });
            },
            getDialogCount() {
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/message/getDialogCount?userId=' + _this.user.id
                }).then(function (resp) {
                    _this.dialogCount = resp.data.data[0];
                });
            },
            getDialogNoRead() {
                this.dialogLog = true;
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/message/getDialogMessage?userId=' + _this.user.id
                }).then(function (resp) {
                    _this.usernames = [];
                    _this.userDialogCount = [];
                    _this.dialogs = [];
                    var dialogView = resp.data.data[0];
                    for (let i = 0; i < dialogView.length; i++) {
                        _this.usernames.push(dialogView[i].username);
                        _this.userDialogCount.push(dialogView[i].dialogCount);
                        _this.dialogs.push(dialogView[i].dialog);
                    }
                });
            },
            inDialog(dialog) {
                var _this = this;
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/webdemo/method/dialog/updateDialog',
                    data: dialog.id
                }).then(function (resp) {
                    location.href = "socket.html?myId=" + JSON.stringify(_this.user.id) + '&anotherId=' + JSON.stringify(dialog.userId);
                });
            },
            recoverPass() {
                location.href = 'recoverPassword.html'
            },
            logOut() {
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/user/logOut'
                }).then(function (resp) {
                    location.href = 'LogIn.html';
                });
            }
        },
        template: `
          <div class="demo-type">
            <el-avatar :size="220" :src="user.headImage" @error="errorHandler">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>
            <el-descriptions title="用户信息">
              <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{ user.phone }}</el-descriptions-item>
              <el-descriptions-item label="联系邮箱">{{ user.email }}</el-descriptions-item>
            </el-descriptions>
            <el-row>
              <el-button type="primary" @click="headImage = true">更改头像</el-button>
              <!--------------------------------------------------------->
              <el-dialog title="更改头像" :visible.sync="headImage">
                <el-form>
                  <el-form-item>
                    <div>
                      <form @submit.prevent="handleSubmit">
                        <input type="file" @change="handleFileChange"/>
                        <button type="submit">发布</button>
                      </form>
                    </div>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="headImage = false">取 消</el-button>
                </div>
              </el-dialog>
              <!--------------------------------------------------------->
              <el-button type="primary" @click="userForm = true">更改个人信息</el-button>
              <!---------------------------------------------------->
              <el-dialog title="用户信息" :visible.sync="userForm">
                <el-form :model="form">
                  <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="form.email" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="电话号码" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-row>
                    <el-button @click="userForm = false">取 消</el-button>
                    <el-button type="primary" @click="updateUser">确 定</el-button>
                  </el-row>
                </div>
              </el-dialog>
              <!---------------------------------------------------->
              <el-badge :value="inviteCount" :max="99" class="item">
                <el-button type="primary" @click="showInvite">邀请</el-button>
              </el-badge>
              <el-dialog title="邀请列表" :visible.sync="inviteBaseLog">
                <div v-for="base in inviteBases">
                  <el-descriptions>
                    <el-descriptions-item label="知识库名称">{{ base.name }}</el-descriptions-item>
                  </el-descriptions>
                  <el-row>
                    <el-button type="primary" @click="acceptInvite(base.id)">同意</el-button>
                    <el-button type="danger" @click="rejectInvite(base.id)">拒绝</el-button>
                  </el-row>
                </div>
              </el-dialog>
              <el-badge :value="likeCount" :max="99" class="item">
                <el-button type="primary" @click="showLike">点赞</el-button>
              </el-badge>
              <el-dialog title="点赞列表" :visible.sync="likeLog">
                <div v-for="(article,index) in articles" :key="index">
                  <el-descriptions>
                    <el-descriptions-item label="点赞">{{ usernames[index] }}给你的文章:{{ article.title }}
                      点赞了
                    </el-descriptions-item>
                  </el-descriptions>
                  <el-row>
                    <el-button type="primary" @click="lookUser(userIds[index])">查看用户</el-button>
                    <el-button type="primary" @click="locateArticle(article)">查看文章</el-button>
                    <el-button type="danger" @click="deleteLike(messageIds[index])">删除</el-button>
                  </el-row>
                </div>
              </el-dialog>
              <el-badge :value="commentCount" :max="99" class="item">
                <el-button type="primary" @click="showComment">评论</el-button>
              </el-badge>
              <el-dialog title="评论" :visible.sync="commentLog">
                <div v-for="(article,index) in articles" :key="index">
                  <el-descriptions>
                    <el-descriptions-item label="评论">{{ usernames[index] }}给你的文章:{{ article.title }}
                      评论了
                    </el-descriptions-item>
                  </el-descriptions>
                  <el-row>
                    <el-button type="primary" @click="lookUser(userIds[index])">查看用户</el-button>
                    <el-button type="primary" @click="locateArticle(article)">查看文章</el-button>
                    <el-button type="danger" @click="deleteComment(messagesIds[index])">删除</el-button>
                  </el-row>
                </div>
              </el-dialog>
              <!----------------------------------------------->
              <el-badge :value="replyCount" :max="99" class="item">
                <el-button type="primary" @click="showReply">回复</el-button>
              </el-badge>
              <el-dialog title="回复" :visible.sync="replyLog">
                <div v-for="(article,index) in articles" :key="index">
                  <el-descriptions>
                    <el-descriptions-item label="点赞">{{ usernames[index] }}给你在:{{ article.title }}
                      的留言回复了
                    </el-descriptions-item>
                  </el-descriptions>
                  <el-row>
                    <el-button type="primary" @click="lookUser(userIds[index])">查看用户</el-button>
                    <el-button type="primary" @click="locateArticle(article)">查看文章</el-button>
                    <el-button type="danger" @click="deleteReply(messageIds[index])">删除</el-button>
                  </el-row>
                </div>
              </el-dialog>
              <!-------------------------------------------------------->
              <el-badge :value="dialogCount" :max="99" class="item">
                <el-button type="primary" @click="getDialogNoRead">私信</el-button>
              </el-badge>
              <el-dialog title="私信" :visible.sync="dialogLog">
                <div v-for="(dialog,index) in dialogs" :key="index">
                  <el-descriptions>
                    <el-descriptions-item label="私信">{{ usernames[index] }}对你有{{ userDialogCount[index] }}
                      条未读消息
                    </el-descriptions-item>
                  </el-descriptions>
                  <el-row>
                    <el-button type="primary" @click="inDialog(dialog)">私聊</el-button>
                  </el-row>
                </div>
              </el-dialog>
              <!------------------------------------------------->
              <el-button type="primary" @click="showCollectBase">收藏的知识库</el-button>
              <el-dialog title="收藏的知识库" :visible.sync="collectBaseLog">
                <div v-for="collectBase in collectBases">
                  <el-descriptions>
                    <el-descriptions-item label="知识库名称">{{ collectBase.name }}</el-descriptions-item>
                  </el-descriptions>
                  <el-row>
                    <el-button type="primary" @click="lookArticle(collectBase.id)">查看文章</el-button>
                    <el-button type="danger" @click="cancelBase(collectBase.id)">取消收藏</el-button>
                  </el-row>
                </div>
              </el-dialog>
              <el-dialog title="知识库文章" :visible.sync="baseArticleLog">
                <div v-for="(article,index) in articles" :key="index">
                  <el-descriptions>
                    <el-descriptions-item label="标题">{{ article.title }}</el-descriptions-item>
                    <el-descriptions-item label="创建时间">{{ getTime(article.creatTime) }}</el-descriptions-item>
                    <el-descriptions-item label="作者">{{ usernames[index] }}</el-descriptions-item>
                  </el-descriptions>
                  <el-row>
                    <el-button type="primary" @click="clickArticle(article)">查看</el-button>
                  </el-row>
                </div>
                <el-row>
                  <el-button @click="baseArticleLog = false">取 消</el-button>
                  <!------------------------------------------------------------------------>
                  <!------------------------------------------------------------------------>
                </el-row>
              </el-dialog>
              <el-button type="primary" @click="showCollectArticle">收藏的文章</el-button>
              <!----------------------------------------------------->
              <el-dialog title="收藏的文章" :visible.sync="collectArticleLog">
                <div v-for="(article,index) in collectArticles" :key="index">
                  <el-descriptions>
                    <el-descriptions-item label="标题">{{ article.title }}</el-descriptions-item>
                  </el-descriptions>
                  <el-row>
                    <el-button type="primary" @click="locateArticle(article)">查看文章</el-button>
                    <el-button type="danger" @click="cancelArticle(article.id)">取消收藏</el-button>
                  </el-row>
                </div>
              </el-dialog>
              <!------------------------------------------------------>
              <el-button type="primary" @click="showCollectUser">收藏的用户</el-button>
              <el-dialog title="关注的用户" :visible.sync="collectUserLog">
                <div v-for="collectUser in collectUsers">
                  <el-descriptions>
                    <el-descriptions-item label="用户名">{{ collectUser.username }}</el-descriptions-item>
                  </el-descriptions>
                  <el-row>
                    <el-button type="danger" @click="cancelUser(collectUser.id)">取消关注</el-button>
                  </el-row>
                </div>
              </el-dialog>
            </el-row>
            <el-row>
              <el-button type="danger" @click="logOut">退出登录</el-button>
              <el-button type="primary" @click="recoverPass">修改密码</el-button>
            </el-row>
          </div>`

    }
    const base = {
        data: function () {
            return {
                myStatus: {
                    status: ''
                },
                status: '',
                user: {
                    id: '',
                    username: '',
                    email: '',
                    phone: '',
                    headImage: '',
                    password: ''
                },
                bases: [],
                articles: [],
                members: [],
                usernames: [],
                form: {
                    id: '',
                    name: '',
                    brief: '',
                    isPublic: '',
                    createrId: '',
                    baseId: ''
                },
                newArticle: {
                    title: '',
                    text: '',
                    createrId: ''
                },
                dialogFormVisible: false,
                updateBaseLog: false,
                articleLog: false,
                memberLog: false,
                uploadArticle: false,
                formLabelWidth: '120px',
                inviteLog: false,
                inviteUsername: '',
                baseId: ''
            }
        },
        mounted() {
            //获得用户
            let search = location.search;
            let urlParams = new URLSearchParams(search);
            this.user.id = JSON.parse(urlParams.get('userId'));
            //获得知识库
            this.showBase();
            this.getUser();
        },
        methods: {
            getUser() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/user/getUser?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.user = resp.data.data[0];
                });
            },
            //添加知识库
            addBase() {
                this.dialogFormVisible = false;
                this.form.createrId = this.user.id;
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/base/addBase",
                    data: _this.form
                }).then(function (resp) {
                    console.log(resp.data.msg);
                    _this.showBase();
                });
            },
            doUpdateBaseLog(baseId) {
                this.updateBaseLog = true;
                this.form.id = baseId;
            },
            updateBase() {
                this.updateBaseLog = false;
                this.form.createrId = this.user.id;
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/base/updateBase",
                    data: _this.form
                }).then(function (resp) {
                    console.log(resp.data.msg);
                    _this.showBase();
                });
            },
            getTime(min) {
                let newDate = new Date();
                newDate.setTime(min);
                return newDate.toDateString();
            },
            showBase() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/base/showBase",
                    data: _this.user.id
                }).then(function (resp) {
                    _this.bases = resp.data.data[0];
                })
            },
            deleteBase(id) {
                let baseId = id;
                let _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/base/deleteBase",
                    data: baseId
                }).then(function (resp) {
                    console.log(resp.data);
                    _this.showBase();
                });
            },
            lookArticle(baseId) {
                this.baseId = baseId;
                this.articleLog = true;
                var _this = this;
                axios({
                    methods: "get",
                    url: "http://localhost:8080/webdemo/method/article/baseArticle?baseId=" + baseId
                }).then(function (resp) {
                    _this.articles = [];
                    _this.usernames = [];
                    var articleViews = resp.data.data[0];
                    for (let i = 0; i < articleViews.length; i++) {
                        _this.articles.push(articleViews[i].article);
                        _this.usernames.push(articleViews[i].author);
                    }
                    console.log(resp.data.msg);
                });
            },
            clickArticle(article) {
                location.href = "article.html?article=" + JSON.stringify(article) + "&id=" + JSON.stringify(this.user.id);
            },
            deleteArticle(articleId) {
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/article/deleteArticle",
                    data: articleId
                }).then(function (resp) {
                    console.log(resp.data.msg);
                    if (resp.data.msg === 'success') {
                        alert("删除成功");
                    }
                });
            },
            showMember(baseId) {
                this.memberLog = true;
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/member/baseMember?baseId=" + baseId
                }).then(function (resp) {
                    _this.members = [];
                    _this.usernames = [];
                    var memberView = resp.data.data[0];
                    for (let i = 0; i < memberView.length; i++) {
                        _this.members.push(memberView[i].member);
                        _this.usernames.push(memberView[i].username);
                    }
                    console.log(resp.data.msg);
                });
            },
            getStatus(status) {
                if (status === "1") {
                    return "创建人";
                } else if (status === "2") {
                    return "管理员";
                } else {
                    return "成员";
                }
            },
            deleteMember(id) {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/member/deleteMember",
                    data: {
                        memberId: id,
                        userId: _this.user.id
                    }
                }).then(function (resp) {
                    if (resp.data.msg === "success") {
                        alert("删除成功")
                    } else {
                        alert("你没有权限")
                    }

                })
            },
            changeMember(member) {
                var userId = this.user.id;
                var status = '';
                if (member.memberStatus === '2') {
                    status = '3';
                } else {
                    status = '2';
                }
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/member/changeMember",
                    data: {
                        userId: userId,
                        id: member.id,
                        memberId: member.memberId,
                        memberStatus: status,
                        baseId: member.baseId

                    }
                }).then(function (resp) {
                    if (resp.data.msg === "success") {
                        alert("更改成功");
                    } else {
                        alert("你没有权限");
                    }
                });
            },
            handleSubmit() {
                var _this = this;
                const formData = new FormData();
                let key = 0;
                this.newArticle.createrId = this.user.id;
                this.newArticle.baseId = this.baseId,
                    axios({
                        method: "post",
                        url: "http://localhost:8080/webdemo/method/article/uploadArticle",
                        data: _this.newArticle
                    }).then(function (resp) {
                        if (resp.data.msg === 'success') {
                            key = resp.data.data[0];
                            formData.append('articleId', key);
                            formData.append('file', _this.file);
                            axios.post('/webdemo/method/myFiles/articleImage', formData, {
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                }
                            }).then(response => {
                                console.log(response.data);
                                _this.filesUrl = response.data.data[0];
                            }).catch(error => {
                                console.error(error);
                            });
                        } else if (resp.data.msg === 'danger') {
                            alert("含有敏感词");
                        }
                    });
            },
            handleFileChange(event) {
                this.file = event.target.files[0];
            },
            collectBase(baseId) {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/collect/collectBase",
                    data: {
                        baseId: baseId,
                        userId: _this.user.id
                    }
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert("收藏成功");
                    } else {
                        alert("收藏失败");
                    }
                });
            },
            logUtil() {
                this.uploadArticle = true;
                this.articleLog = false;
            },
            doInviteUser(baseId) {
                this.baseId = baseId;
                this.inviteLog = true;
            },
            inviteUser() {
                alert(this.baseId);
                var _this = this;
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/webdemo/method/invite/inviteUser',
                    data: {
                        userId: _this.user.id,
                        inviteUsername: _this.inviteUsername,
                        baseId: _this.baseId
                    }
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert("邀请成功");
                        _this.inviteLog = false;
                    } else {
                        alert("邀请失败，检查用户名是否正确或者已经邀请");
                    }
                });
            }

        },
        template: `
          <el-main>
            <div>
              <div v-for="(base,index) in bases" :key="index">
                <el-descriptions>
                  <el-descriptions-item label="id">{{ base.id }}</el-descriptions-item>
                  <el-descriptions-item label="名字">{{ base.name }}</el-descriptions-item>
                  <el-descriptions-item label="简介">{{ base.brief }}</el-descriptions-item>
                  <el-descriptions-item label="创建时间">{{ getTime(base.creatTime) }}</el-descriptions-item>
                  <el-descriptions-item label="状态" v-if="base.isPublic===1">公开</el-descriptions-item>
                  <el-descriptions-item label="状态" v-if="base.isPublic===2">私有</el-descriptions-item>
                </el-descriptions>
                <el-row>
                  <el-button type="danger" v-show="user.id===base.createrId" @click="deleteBase(base.id)">删除
                  </el-button>
                  <el-button type="primary" v-show="user.id===base.createrId" @click="doUpdateBaseLog(base.id)">更改知识库
                  </el-button>
                  <!--操作表-->
                  <el-dialog title="更改知识库" :visible.sync="updateBaseLog">
                    <el-form :model="form">
                      <el-form-item label="知识库名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="知识库简介" :label-width="formLabelWidth">
                        <el-input v-model="form.brief" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="知识库范围" :label-width="formLabelWidth">
                        <el-select v-model="form.isPublic" placeholder="请选择知识库范围">
                          <el-option label="公开" value="1"></el-option>
                          <el-option label="私有" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <el-button @click="updateBaseLog = false">取 消</el-button>
                    <el-button type="primary" @click="updateBase">确 定</el-button>
                  </el-dialog>
                  <el-button type="primary" @click="doInviteUser(base.id)">邀请加入</el-button>
                  <el-dialog title="邀请用户" :visible.sync="inviteLog">
                    <el-form>
                      <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="inviteUsername" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-row>
                        <el-button type="primary" @click="inviteUser(base.id)">确定</el-button>
                      </el-row>
                    </el-form>
                  </el-dialog>
                  <el-button type="primary" @click="lookArticle(base.id)">管理文章</el-button>
                  <el-dialog title="知识库文章" :visible.sync="articleLog">
                    <div v-for="(article,index) in articles" :key="index">
                      <el-descriptions>
                        <el-descriptions-item label="标题">{{ article.title }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ getTime(article.creatTime) }}</el-descriptions-item>
                        <el-descriptions-item label="作者">{{ usernames[index] }}</el-descriptions-item>
                      </el-descriptions>
                      <el-row>
                        <el-button type="danger" @click="deleteArticle(article.id)">删除</el-button>
                        <el-button type="primary" @click="clickArticle(article)">查看</el-button>
                      </el-row>
                    </div>
                    <el-row>
                      <el-button @click="articleLog = false">取 消</el-button>
                      <el-button @click="logUtil">发表文章</el-button>
                      <!------------------------------------------------------------------------>
                      <!------------------------------------------------------------------------>
                    </el-row>
                  </el-dialog>
                  <el-dialog title="发表文章" :visible.sync="uploadArticle">
                    <el-form :model="newArticle">
                      <el-form-item label="文章标题" :label-width="formLabelWidth">
                        <el-input v-model="newArticle.title" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="内容" :label-width="formLabelWidth">
                        <el-input v-model="newArticle.text" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <div>
                          <form @submit.prevent="handleSubmit">
                            <input type="file" @change="handleFileChange"/>
                            <button type="submit">发布</button>
                          </form>
                        </div>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="uploadArticle = false">取 消</el-button>
                    </div>
                  </el-dialog>
                  <el-button type="primary" v-show="user.id===base.createrId" @click="showMember(base.id)">管理成员
                  </el-button>
                  <el-dialog title="成员列表" :visible.sync="memberLog">
                    <div v-for="(member,index) in members" :key="index">
                      <el-descriptions>
                        <el-descriptions-item label="成员名">{{ usernames[index] }}</el-descriptions-item>
                        <el-descriptions-item label="成员身份">{{ getStatus(member.memberStatus) }}
                        </el-descriptions-item>
                      </el-descriptions>
                      <el-row>
                        <el-button type="primary" v-show="user.id!==member.memberId" @click="changeMember(member)">
                          更改成员状态
                        </el-button>
                        <el-button type="danger" v-show="user.id!==member.memberId"
                                   @click="deleteMember(member.id)">删除
                        </el-button>
                      </el-row>
                    </div>
                    <el-row>
                      <el-button @click="memberLog = false">取 消</el-button>
                    </el-row>
                  </el-dialog>
                  <el-button type="primary" @click="collectBase(base.id)">收藏知识库</el-button>
                </el-row>
              </div>
              <el-button type="text" @click="dialogFormVisible = true">创建知识库</el-button>
              <el-dialog title="创建知识库" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="知识库名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="知识库简介" :label-width="formLabelWidth">
                    <el-input v-model="form.brief" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="知识库范围" :label-width="formLabelWidth">
                    <el-select v-model="form.isPublic" placeholder="请选择知识库范围">
                      <el-option label="公开" value="1"></el-option>
                      <el-option label="私有" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="addBase">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </el-main>`
    }
    const baseSearch = {
        data: function () {
            return {
                usernames: [],
                input: '',
                bases: [],
                articleLog: false,
                articles: [],
                user: {
                    id: '',
                    username: '',
                    email: '',
                    phone: '',
                    headImage: '',
                    password: ''
                }
            }
        },
        mounted() {
            //获得用户
            let search = location.search;
            let urlParams = new URLSearchParams(search);
            this.user.id = JSON.parse(urlParams.get('userId'));
            this.search();
            this.getUser();
        },
        methods: {
            getUser() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/user/getUser?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.user = resp.data.data[0];
                });
            },
            search() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/base/searchBase?input=" + _this.input,
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    }
                }).then(function (resp) {
                    _this.bases = resp.data.data[0];
                });
            },
            getStatus(baseStatus) {
                if (baseStatus === 1) {
                    return "公开";
                } else {
                    return "私有";
                }
            },
            lookArticle(baseId) {
                this.articleLog = true;
                var _this = this;
                axios({
                    methods: "get",
                    url: "http://localhost:8080/webdemo/method/article/baseArticle?baseId=" + baseId
                }).then(function (resp) {
                    _this.articles = [];
                    _this.usernames = [];
                    var articleViews = resp.data.data[0];
                    for (let i = 0; i < articleViews.length; i++) {
                        _this.articles.push(articleViews[i].article);
                        _this.usernames.push(articleViews[i].author);
                    }
                    console.log(resp.data.msg);
                });
            },
            clickArticle(article) {
                let thisArticle = {
                    id: '',
                    title: '',
                    content: '',
                    createrId: '',
                    creatTime: '',
                    baseId: ''
                };
                thisArticle = article;
                location.href = "article.html?article=" + JSON.stringify(thisArticle) + "&id=" + JSON.stringify(this.user.id);
            },
            getTime(min) {
                let newDate = new Date();
                newDate.setTime(min);
                return newDate.toDateString();
            },
            collectBase(baseId) {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/collect/collectBase",
                    data: {
                        baseId: baseId,
                        userId: _this.user.id
                    }
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert("收藏成功");
                    } else {
                        alert("收藏失败");
                    }
                });
            }
        },
        template: `
          <div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <el-row>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-row>
            <div v-for="base in bases">
              <el-descriptions title="知识库">
                <el-descriptions-item label="知识库名">{{ base.name }}</el-descriptions-item>
                <el-descriptions-item label="知识库简介">{{ base.brief }}</el-descriptions-item>
                <el-descriptions-item label="知识库范围">{{ getStatus(base.isPublic) }}</el-descriptions-item>
              </el-descriptions>
              <el-row>
                <el-button type="primary" @click="lookArticle(base.id)">查看文章</el-button>
                <el-dialog title="知识库文章" :visible.sync="articleLog">
                  <div v-for="(article,index) in articles" :key="index">
                    <el-descriptions>
                      <el-descriptions-item label="标题">{{ article.title }}</el-descriptions-item>
                      <el-descriptions-item label="创建时间">{{ getTime(article.creatTime) }}</el-descriptions-item>
                      <el-descriptions-item label="作者">{{ usernames[index] }}</el-descriptions-item>
                    </el-descriptions>
                    <el-row>
                      <el-button type="primary" @click="clickArticle(article)">查看</el-button>
                    </el-row>
                  </div>
                  <el-row>
                    <el-button @click="articleLog = false">取 消</el-button>
                  </el-row>
                </el-dialog>
                <el-button type="primary" @click="collectBase(base.id)">收藏知识库</el-button>
              </el-row>
            </div>
          </div>`
    }
    const enterBase = {
        data: function () {
            return {
                usernames: [],
                user: {
                    id: '',
                    username: '',
                    email: '',
                    phone: '',
                    headImage: '',
                    password: ''
                },
                newArticle: {
                    title: '',
                    text: '',
                    createrId: ''
                },
                bases: [],
                baseId: '',
                articleLog: false,
                uploadArticle: false,
                formLabelWidth: '120px',
                articles: []
            }
        }, mounted() {
            //获得用户
            let search = location.search;
            let urlParams = new URLSearchParams(search);
            this.user.id = JSON.parse(urlParams.get('userId'));
            //获得知识库
            this.showBase();
            this.getUser()
        },
        methods: {
            getUser() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/user/getUser?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.user = resp.data.data[0];
                });
            },
            getStatus(baseStatus) {
                if (baseStatus === 1) {
                    return "公开";
                } else {
                    return "私有";
                }
            },
            showBase() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/base/myEnterBase?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.bases = resp.data.data[0];
                    console.log(resp.data.msg);
                });
            },
            lookArticle(baseId) {
                this.baseId = baseId;
                this.articleLog = true;
                var _this = this;
                axios({
                    methods: "get",
                    url: "http://localhost:8080/webdemo/method/article/baseArticle?baseId=" + baseId
                }).then(function (resp) {
                    _this.articles = [];
                    _this.usernames = [];
                    var articleViews = resp.data.data[0];
                    for (let i = 0; i < articleViews.length; i++) {
                        _this.articles.push(articleViews[i].article);
                        _this.usernames.push(articleViews[i].author);
                    }
                    console.log(resp.data.msg);
                });
            },
            clickArticle(article) {
                let thisArticle = {
                    id: '',
                    title: '',
                    content: '',
                    createrId: '',
                    creatTime: '',
                    baseId: ''
                };
                thisArticle = article;
                location.href = "article.html?article=" + JSON.stringify(thisArticle) + "&id=" + JSON.stringify(this.user.id);
            },
            getTime(min) {
                let newDate = new Date();
                newDate.setTime(min);
                return newDate.toDateString();
            },
            handleSubmit() {
                var _this = this;
                const formData = new FormData();
                let key = 0;
                this.newArticle.createrId = this.user.id;
                this.newArticle.baseId = this.baseId,
                    axios({
                        method: "post",
                        url: "http://localhost:8080/webdemo/method/article/uploadArticle",
                        data: _this.newArticle
                    }).then(function (resp) {
                        key = resp.data.data[0];
                        formData.append('articleId', key);
                        formData.append('file', _this.file);
                        axios.post('/webdemo/method/myFiles/articleImage', formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }).then(response => {
                            console.log(response.data);
                            _this.filesUrl = response.data.data[0];
                        }).catch(error => {
                            console.error(error);
                        });
                    });

            },
            handleFileChange(event) {
                this.file = event.target.files[0];
            },
            collectBase(baseId) {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/collect/collectBase",
                    data: {
                        baseId: baseId,
                        userId: _this.user.id
                    }
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert("收藏成功");
                    } else {
                        alert("收藏失败");
                    }
                });
            },
            logUtil() {
                this.uploadArticle = true;
                this.articleLog = false;
            }
        },
        template: `
          <div>
            <div v-for="base in bases">
              <el-descriptions title="知识库">
                <el-descriptions-item label="知识库名">{{ base.name }}</el-descriptions-item>
                <el-descriptions-item label="知识库简介">{{ base.brief }}</el-descriptions-item>
                <el-descriptions-item label="知识库范围">{{ getStatus(base.isPublic) }}</el-descriptions-item>
              </el-descriptions>
              <el-row>
                <el-button type="primary" @click="lookArticle(base.id)">查看文章</el-button>
                <el-dialog title="知识库文章" :visible.sync="articleLog">
                  <div v-for="(article,index) in articles" :key="index">
                    <el-descriptions>
                      <el-descriptions-item label="标题">{{ article.title }}</el-descriptions-item>
                      <el-descriptions-item label="创建时间">{{ getTime(article.creatTime) }}</el-descriptions-item>
                      <el-descriptions-item label="作者">{{ usernames[index] }}</el-descriptions-item>
                    </el-descriptions>
                    <el-row>
                      <el-button type="primary" @click="clickArticle(article)">查看</el-button>
                    </el-row>
                  </div>
                  <el-row>
                    <el-button @click="articleLog = false">取 消</el-button>
                    <!--------------------------------->
                    <el-button type="text" @click="logUtil">发表文章</el-button>
                    <!------------------------------------------->
                  </el-row>
                </el-dialog>
                <el-dialog title="发表文章" :visible.sync="uploadArticle">
                  <el-form :model="newArticle">
                    <el-form-item label="文章标题" :label-width="formLabelWidth">
                      <el-input v-model="newArticle.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" :label-width="formLabelWidth">
                      <el-input v-model="newArticle.text" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <div>
                        <form @submit.prevent="handleSubmit">
                          <input type="file" @change="handleFileChange"/>
                          <button type="submit">发布</button>
                        </form>
                      </div>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="uploadArticle = false">取 消</el-button>
                  </div>
                </el-dialog>
                <el-button type="primary" @click="collectBase(base.id)">收藏知识库</el-button>
              </el-row>
            </div>
          </div>
        `
    }
    const userSearch = {
        data: function () {
            return {
                users: [],
                input: '',
                user: {
                    id: '',
                    username: '',
                    email: '',
                    phone: '',
                    headImage: '',
                    password: ''
                }
            }
        }, mounted() {
            //获得用户
            let search = location.search;
            let urlParams = new URLSearchParams(search);
            this.user.id = JSON.parse(urlParams.get('userId'));
            this.getUser();
        },
        methods: {
            getUser() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/user/getUser?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.user = resp.data.data[0];
                });
            }, search() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/user/searchUser?input=" + _this.input,
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    }
                }).then(function (resp) {
                    _this.users = resp.data.data[0];
                });
            },
            lookUser(userId) {
                location.href = "user.html?id=" + JSON.stringify(userId) + '&userId=' + JSON.stringify(this.user.id);
            }
        },
        template: `
          <div>
            <div>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
              <el-row>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-row>
              <div v-for="user in users">
                <el-descriptions title="用户">
                  <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
                </el-descriptions>
                <el-row>
                  <el-button type="primary" @click="lookUser(user.id)">查看用户</el-button>
                </el-row>
              </div>
            </div>
          </div>
        `
    }
    const router = new VueRouter({
        routes: [
            {path: '/first', component: first, name: 'first'}
        ]
    })
    var app = new Vue({
        el: '#app',
        data() {
            return {
                currentView: 'view-article',
                user: {
                    id: '',
                    username: '',
                    email: '',
                    phone: '',
                    headImage: '',
                    password: ''
                },
                traces: [],
                articles: [],
                tracesLog: false
            }
        },
        mounted() {
            let search = location.search;
            let urlParams = new URLSearchParams(search);
            this.user.id = JSON.parse(urlParams.get('userId'));
        },
        methods: {
            click(view) {
                this.currentView = view;
            },
            selectTraces() {
                this.tracesLog = true;
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/traces/getTraces?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.traces = [];
                    _this.articles = [];
                    var replyView = resp.data.data[0];
                    for (let i = 0; i < replyView.length; i++) {
                        _this.traces.push(replyView[i].traces);
                        _this.articles.push(replyView[i].article);
                    }
                });
            },
            deleteTrace(traceId) {
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/traces/deleteATrace",
                    data: traceId
                }).then(function (resp) {
                    if (resp.data.msg === "success") {
                        alert("删除成功");
                    }
                });
            },
            deleteAll() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/traces/deleteAll",
                    data: _this.user.id
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert("清空成功");
                    }
                });
            },
            locate(article) {
                location.href = "article.html?article=" + JSON.stringify(article) + "&id=" + JSON.stringify(this.user.id);
            }
        },
        components: {
            'view-user': person,
            'view-b': first,
            'view-article': article,
            'view-base': base,
            'view-baseSearch': baseSearch,
            'view-enterBase': enterBase,
            'view-userSearch': userSearch
        },
        router: router
    })
</script>
</body>
</html>
<script setup>
</script>
<script setup>
</script>